<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 80%;
      margin: 20px auto;
    }

    table {
      width: 100%;
      text-align: center;
    }

    .write {}

    .show {
      display: none;
    }

    .Dis {
      display: none;
    }

    .btn_list button {
      margin-right: 10px;
    }

    .btn_list .active {
      background: red;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div id="nav">
      <a href="#" style="background: yellow;">录入</a> <a href="#">展示</a>
    </div>
    <div id="content">
      <div class="write">
        商品名称：<input type="text" id="pname">
        <br>
        商品类型：<input type="text" id="sel">
        <br>
        商品价格：<input type="text" id="price">
        <button id="addBtn">提交</button>
      </div>
      <div class="show">
        <div class="btn_list">

        </div>
        <table border="1">
          <thead>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>单价</th>
              <th>类型</th>
              <th>库存</th>
              <th>上架时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="mybody">
            <!-- <tr>
              <td>序号</td>
              <td>名称</td>
              <td>单价</td>
              <td>类型</td>
              <td><button>-</button>0<button>+</button></td>
              <td>上架时间</td>
              <td>
                <a href="#">删除</a>
              </td>
            </tr> -->
          </tbody>
        </table>
      </div>
    </div>

  </div>
  <script src="./javascripts/jquery-3.4.1.min.js"></script>
  <script src="./javascripts/index.js"></script>
</body>

</html>